<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;

        }

        div {
            margin: 50px auto;
            box-sizing: border-box;
            clear: both;
            width: 160px;
            height: 30px;
            /* background: rgba(231,240,250); */
            /* border: 1px solid red; */

        }

        div span {
            box-sizing: border-box;
            float: left;
            width: 28px;
            height: 28px;
            /* border: 1px solid red; */

            background: url(./img/star.jpg) no-repeat -2px -72px;
        }

        div span.yellow_xing {
            background: url(./img/star.jpg) no-repeat -2px -1px;
        }

        div span.gray_xing {
            background: url(./img/star.jpg) no-repeat -2px -37px;
        }
    </style>
</head>

<body>
    <div>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>

    </div>
    <script src="./js/jquery-3.6.0.js"></script>
    <script>
        // 鼠标移上 星星时，星星变黄鼠标移出时，星星变灰
        // 鼠标在星星上点击时，使这颗星及以前的星都变黄，鼠标移出的不会变灰
        $(function () {
            $("div>span").mouseenter(function () {
                var len = $(this).index();
                console.log(len);
                $("div>span").each(function (i, e) {
                    if (i <= len) {
                        $(this).addClass("yellow_xing");
                    } else {
                        $(this).removeClass("yellow_xing");
                    }


                })

            }).on("click", function () {
                $(this).addClass("yellow_xing").prevAll().addClass("yellow_xing")

            });

            $("div").on("mouseleave", function (e) {

                // $("span").addClass("gray_xing");
                // $("span").addClass("yellow_xing").prevAll().addClass("gray_xing");
            })


        })
    </script>
</body>

</html>